<template>
  <div class="app-container">
    <div class="filter-container">
      <el-dialog :title="title" class="dialogAdd" width="600px" :visible.sync="dialogAddgsVisible">
        <el-form
          :model="addForm"
          ref="addForm"
          style="margin-right: 20px;"
          label-position="right"
          label-width="110px"
        >
          <el-form-item label="菜单名称:" prop="description">
            <el-input placeholder="请输入菜单名称" v-model="addForm.description"></el-input>
          </el-form-item>
          <el-form-item label="菜单权限:" prop="permission">
            <el-input placeholder="请输入菜单权限" v-model="addForm.permission"></el-input>
          </el-form-item>
          <el-form-item label="层级:" prop="showOrder">
            <el-input placeholder="菜单层级" v-model="addForm.showOrder"></el-input>
          </el-form-item>
          <el-form-item label="图标:" prop="icon">
            <el-input placeholder="请输入图标" v-model="addForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="启用:" prop="available">
            <el-switch v-model="addForm.available" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="addPerm">确 定</el-button>
        </div>
      </el-dialog>

      <h3>菜单管理#</h3>
      <tree-table
        :height="tableHeight"
        :data="permList"
        :columns="columns"
        :root_value="'0'"
        :primary_fld="'id'"
        :expand-all="expandAll"
        :parent_fld="'parentId'"
        ref="treeTable"
      >
        <el-table-column label="类别" min-width="150" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.icon? "菜单权限":"功能权限"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="150" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.available? "启用":"停用"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="id" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showAdd(scope.row)"
              v-if="hasPermission('sys:perm:add')"
            >添加子菜单</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="updatePerm(scope.row)"
              v-if="hasPermission('sys:perm:edit')"
            >修改</el-button>
          </template>
        </el-table-column>
      </tree-table>
    </div>
  </div>
</template>

<script>
import treeTable from "@/components/treeTable/permTree.vue";

import { getRolePerms } from "@/api/role";
import { getPermList, addSubPerm } from "@/api/perm";

export default {
  name: "Menu-Management",
  components: {
    treeTable
  },
  mounted: function() {
    this.$nextTick(function() {
      /*this.tableHeight =
        window.innerHeight -
        30 -
        this.$refs.treeTable.$el.offsetTop -
        document.getElementsByClassName("navbar")[0].parentNode.clientHeight;

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.tableHeight =
          window.innerHeight -
          30 -
          self.$refs.treeTable.$el.offsetTop -
          document.getElementsByClassName("navbar")[0].parentNode.clientHeight;
      };*/
    });
  },
  data() {
    return {
      title: "新增菜单",
      dialogAddgsVisible: false,

      addForm: {
        available: 1,
        description: "",
        permission: "",
        parentId: "",
        parentName: "",
        icon: "",
        showOrder: ""
      },

      tableHeight: 500,
      expandAll: true,
      columns: [{ value: "description", text: "菜单", minWidth: "300" }],
      permList: [
        {
          id: 1,
          available: true,
          description: "根节点",
          permission: "root",
          parentId: 0,
          showOrder: null,
          parentName: null,
          icon: null
        }
      ]
    };
  },
  created() {
    window.app = this;
    this.getList();
  },
  methods: {
    addPerm() {
      if (!this.addForm.description) {
        this.$message({
          message: "请输入菜单名称",
          type: "warning"
        });
        return false;
      }

      if (!this.addForm.permission) {
        this.$message({
          message: "请输入菜单权限",
          type: "warning"
        });
        return false;
      }

      addSubPerm(this.addForm).then(response => {
        if (response.code == 200) {
          this.getList();
        }
        console.log(response);
        this.dialogAddgsVisible = false;
      });
    },
    showAdd(row) {
      title: "新增菜单", (this.dialogAddgsVisible = true);
      this.addForm.parentName = row.description
        ? row.description
        : row.permissionName;
      this.addForm.parentId = row.id ? row.id : row.permissionId;
    },
    updatePerm(row) {
      title: "更新菜单", (this.dialogAddgsVisible = true);

      this.addForm.available = row.available;
      this.addForm.description = row.description;
      this.addForm.icon = row.icon;
      this.addForm.id = row.id;
      this.addForm.parentId = row.parentId;
      this.addForm.parentName = row.parentName;
      this.addForm.permission = row.permission;
      this.addForm.showOrder = row.showOrder;
    },
    /* getChoosePerm() {
      let dataSet = {
        role: 1,
        list: []
      };
      this.permList.map(item => {
        if (item["false"]) {
          let perm = {
            permissionId: item.permissionId,
            roleId: dataSet.role
          };
          dataSet.list.push(perm);
        }
      });
      console.log(dataSet);
    }, */
    getList() {
      this.listLoading = true;
      // getRolePerms({ role: "" }).then(response => {
      getPermList({ pageSize: 1000, available: -1 }).then(response => {
        // this.permList = response.data;
        this.permList = response.page;

        this.permList.map(row => {
          row.id = row.id + "";
          row.parentId = row.parentId + "";
        });

        /*this.permList.sort(function(a,b){
          return (a.parentId - b.parentId) && (a.showOrder - b.showOrder)
        })*/

        // Just to simulate the time of the request
        /* this.permList.map(row => {
          if (row.available === 1) {
            this.$refs.treeTable.chooseNode(row);
          }
        }); */
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    }
  }
};
</script>

<style scoped>
</style>
